<template>
    <div>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
        >
        <el-menu-item index="0">
            <a href="https://www.4399.com/flash/210650.htm" style="margin-bottom: 10px;"><img src="../images/icon.png" width="50px" height="50px" alt="Element logo" /></a>
        </el-menu-item>
        <el-menu-item index="1"><router-link to="/">首页</router-link></el-menu-item>
        <el-menu-item index="2"><router-link to="/cart">购物车</router-link></el-menu-item>
        <el-menu-item index="3"><router-link to="/order">订单</router-link></el-menu-item>
        <el-menu-item index="4"><router-link to="/About">关于</router-link></el-menu-item>
        <div class="flex-grow"/>
        <el-menu-item index="5">
            {{ name }},欢迎你！
        </el-menu-item>
        <el-menu-item index="6" v-if="name=='游客'"><router-link to="/login">登录/注册</router-link></el-menu-item>
        <el-menu-item index="7" v-else @click="esc()">退出</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
import router from '@/router';
import { ElMessage } from 'element-plus';


export default{
    data() {
        return {
            name:'游客'
        }
    },
    mounted() {
        if (sessionStorage.getItem('username') == null) {
            this.name = '游客'
        } else {
            this.name = sessionStorage.getItem('username')
        }
    },
    methods: {
        esc() {
            this.name = '游客',
            sessionStorage.setItem('username', '游客'),
            localStorage.removeItem('token'),
            router.push('/')
            ElMessage({type: 'success', message: '跳转首页'})
        },
        
    }
}
</script>

<style>
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: none;
}
.flex-grow{
    flex-grow: 1;
}
</style>